<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col :span="6" :xs="24">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>个人信息</span>
					</div>
					<div>
						<div class="text-center">
							<userAvatar />
						</div>
						<ul class="list-group list-group-striped">
							<li class="list-group-item">
								<svg-icon icon-class="email" />用户邮箱
								<div class="pull-right">{{ user.email }}</div>
							</li>
							<li class="list-group-item">
								<svg-icon icon-class="user" />用户昵称
								<div class="pull-right">{{ user.nickname }}</div>
							</li>
						</ul>
					</div>
				</el-card>
			</el-col>
			<el-col :span="18" :xs="24">
				<el-card>
					<div slot="header" class="clearfix">
						<span>基本资料</span>
					</div>
					<el-tabs v-model="activeTab">
						<el-tab-pane label="基本资料" name="userinfo">
							<userInfo :user="user" />
						</el-tab-pane>
						<el-tab-pane label="修改密码" name="resetPwd">
							<resetPwd />
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import userAvatar from "./userAvatar";
	import userInfo from "./userInfo";
	import resetPwd from "./resetPwd";
	import {
		getUserProfile
	} from "@/api/system/user";

	export default {
		name: "Profile",
		components: {
			userAvatar,
			userInfo,
			resetPwd
		},
		data() {
			return {
				user: {},
				roleGroup: {},
				postGroup: {},
				activeTab: "userinfo"
			};
		},
		created() {
			this.getUser();
		},
		methods: {
			getUser() {
				getUserProfile().then(res => {
					this.user = res.user;
					// this.roleGroup = response.roleGroup;
					// this.postGroup = response.postGroup;
				});
			}
		}
	};
</script>